<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
</head>

<body>
    <form class="layui-form" action="">
        <div class="mainBox">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        任务名称
                    </label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-form-danger" name="jobname" type="text" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        发送类型
                    </label>
                    <div class="layui-input-block">
                        <select name="sendtype" lay-filter="sendtype" lay-search>
                            <option value="">发送类型</option>
                            <option value="1">单人</option>
                            <option value="2">多人</option>
                            <option value="3">单区</option>
                            <option value="4">多区</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" name="divtou1" style="display: none;">
                    <label class="layui-form-label">
                        所在区服
                    </label>
                    <div class="layui-input-inline">
                        <select name="qufu1" lay-search>
                            <option value="">服务器ID(可输入后选择)</option>
                            {volist name="ServerLs" id="server"}
                            <option value="{$server.sid}">{$server.name}</option>
                            {/volist}
                        </select>
                    </div>
                    <label class="layui-form-label">
                        玩家账号
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input layui-form-danger" name="tou1" id="tou1" type="text" />
                    </div>
                    <label class="layui-form-label">
                        角色名称
                    </label>
                    <div class="layui-input-inline">
                        <select name="actoraccount1" id="actoraccount1" lay-search>
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" name="divtou2" style="display: none;">
                    <label class="layui-form-label">
                        账号列表
                    </label>
                    <div class="layui-input-block">
                        <textarea name="accountls" id="accountls" placeholder="" class="layui-textarea"></textarea>
                    </div>
                    <label class="layui-form-label">
                        所在区服
                    </label>
                    <div class="layui-input-inline">
                        <select name="qufu2" id="qufu2" lay-search>
                            <option value="">服务器ID(可输入后选择)</option>
                            {volist name="ServerLs" id="server"}
                            <option value="{$server.sid}">{$server.name}</option>
                            {/volist}
                        </select>
                    </div>
                    <label class="layui-form-label">
                        玩家账号
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input layui-form-danger" id="tou2" name="tou2" type="text" />
                    </div>
                    <label class="layui-form-label">
                        角色名称
                    </label>
                    <div class="layui-input-inline">
                        <select name="actoraccount2" id="actoraccount2" lay-search>
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" name="divtou2" style="display: none;">
                    <label class="layui-form-label">
                    </label>
                    <div class="layui-input-block">
                        <button type="button" id="btnaddals" class="layui-btn layui-btn-fluid layui-btn-normal" >添  加</button>
                    </div>
                </div>
                <div class="layui-form-item" name="divtou2" style="display: none;">
                    <label class="layui-form-label">
                    </label>
                    <div class="layui-input-block">
                        <button type="button" id="btnclearnals" class="layui-btn layui-btn-fluid layui-btn-warm" >清  除</button>
                    </div>
                </div>
                <div class="layui-form-item" name="divtou3" style="display: none;">
                    <label class="layui-form-label">
                        区服
                    </label>
                    <div class="layui-input-block">
                        <select name="qufu3" id="qufu3" lay-search>
                            <option value="">服务器ID(可输入后选择)</option>
                            {volist name="ServerLs" id="server"}
                            <option value="{$server.sid}">{$server.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" name="divtou4" style="display: none;">
                    <label class="layui-form-label">
                        区服列表
                    </label>
                    <div class="layui-input-block">
                        {volist name="ServerHeLs" id="ServerHeLs"}
                        <input type="checkbox" data-title="{$ServerHeLs.serverid}" name="qflscheckbox"
                            title="{$ServerHeLs.name}">
                        {/volist}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        邮件标题
                    </label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-form-danger" name="emailtitle" type="text" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        邮件内容
                    </label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-form-danger" name="emailcontent" type="text" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        物品集合
                    </label>
                    <div class="layui-input-block">
                        <textarea name="goods" id="goods" placeholder="" class="layui-textarea"></textarea>
                    </div>
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <select name="goodsls" id="goodsls" lay-search>
                            <option value="">物品列表(可输入后选择)</option>
                            {volist name="ItemLs" id="ItemLs"}
                            <option value="{$ItemLs.itemid}">{$ItemLs.itemname}</option>
                            {/volist}
                        </select>
                    </div>
                    <label class="layui-form-label">
                        物品数量
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input layui-form-danger" name="goodsnum" id="goodsnum"
                            type="text" />
                    </div>
                    <div class="layui-input-inline">
                        <button type="button" id="btnaddgls" class="layui-btn layui-btn-sm layui-btn-normal"
                            style="margin-top: 5px;">添加物品</button>
                        <button type="button" id="btnaddptb" class="layui-btn layui-btn-sm layui-btn-normal"
                            style="margin-top: 5px;">添加平台币</button>
                    </div>
                    <!-- <div class="layui-input-inline">
                        <button type="button" id="btnaddptb" class="layui-btn layui-btn-sm layui-btn-normal"
                            style="margin-top: 5px;">添加平台币</button>
                    </div> -->
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        备注
                    </label>
                    <div class="layui-input-block">
                        <textarea name="remake" placeholder="输入备注内容(备选，可不填)" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
    <script>
        layui.use(['form', 'jquery', 'layedit', 'uploads'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let layedit = layui.layedit
            layedit.set({
                uploadImage: {
                    url: "{$Request.root}/index/upload"
                }
            });
            var qufuls = [];
            //建立编辑器
            form.on('submit(save)', function (data) {

                data.field.qflscheckbox = JSON.stringify(qufuls);
                $.ajax({
                    data: JSON.stringify(data.field),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    success: function (res) {
                        //判断有没有权限
                        if (res && res.code == 999) {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 2000,
                            })
                            return false;
                        } else if (res.code == 200) {
                            layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                                parent.layui.table.reload("dataTable");
                            });
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000 });
                        }
                    }
                })
                return false;
            });

            // 监听下拉框的变化事件
            form.on('select(sendtype)', function (data) {
                var selectedValue = data.value; // 获取所选选项的值
                var newselectedValue = 'divtou' + selectedValue;
                $('div[name="divtou1"]').css('display', 'none');
                $('div[name="divtou2"]').css('display', 'none');
                $('div[name="divtou3"]').css('display', 'none');
                $('div[name="divtou4"]').css('display', 'none');

                $('div[name="' + newselectedValue + '"]').css('display', 'block');

            });


            // 监听多选框的变化事件
            form.on('checkbox', function (data) {
                qufuls = []; // 用于存储选中的多选框数据
                // 遍历所有多选框
                $('input[name="qflscheckbox"]:checked').each(function () {
                    var title = $(this).attr('data-title'); // 获取选中多选框的title属性值
                    qufuls.push(title); // 存储选中的多选框数据
                });

                // 打印选中的多选框数据
                console.log(qufuls);
            });

            // 添加用户列表
            $('#btnaddals').on('click', function () {

                var accountplayer = $('#tou2').val();
                var qufu = $('#qufu2').val();
                var actoraccount2 = $('#actoraccount2').val();
                var currentValue = $('#accountls').val(); // 获取当前值
                currentValue += accountplayer.trim() + ',' + qufu +','+actoraccount2+ ';'; // 追加新值

                if (accountplayer == '' || qufu == '') { layer.msg('要先填入“账号”和“区服”'); return; }

                $('#accountls').val(currentValue); // 设置新值

            });



            // 清空用户列表
            $('#btnclearnals').on('click', function () {
                $('#accountls').val('');
            });


            // 添加物品列表
            $('#btnaddgls').on('click', function () {

                // 获取下拉框选中项的实际值（value）
                var goodsitemid = $('#goodsls').next().find('.layui-this').attr('lay-value');
                // 获取下拉框选中项的显示值（text）
                var goodsname = $('#goodsls').next().find('.layui-this').text();
                //物品数量
                var goodsnum = $('#goodsnum').val();

                if (goodsitemid == '' || goodsname == '' || goodsnum == '') { layer.msg('要先选择“物品”,填写数量！'); return; }

                var currentValue = $('#goods').val(); // 获取当前值
                currentValue += goodsitemid + '|' + goodsname + '|' + goodsnum + ';'; // 追加新值

                $('#goods').val(currentValue);
            });

            // 添加平台币
            $('#btnaddptb').on('click', function () {
                layer.prompt({ title: '输入平台币数量！', formType: 2 }, function (text, index) {
                    var currentValue = $('#goods').val(); // 获取当前值
                    currentValue += 'ptb|平台币|'+ text+';' ; // 追加新值
                    $('#goods').val(currentValue);
                    layer.close(index);
                });
            });
            $("#tou1").on("input", function (e) {
                //获取input输入的值
                var value = e.delegateTarget.value;
                if (value != null && value != '') {
                    getActors(1);
                }
            })
            $("#tou2").on("input", function (e) {
                //获取input输入的值
                var value = e.delegateTarget.value;
                if (value != null && value != '') {
                    getActors(2);
                }
            })

            function getActors(v) {
                var actorname = $('#tou'+v).val();
                var serverid = $("select[name='qufu"+v+"']").val();
                if (serverid.trim() === "") {
                    layer.msg("请先填写区服名称！！！");
                    return
                }
                if (actorname.trim() === "") {
                    layer.msg("请先填写账号！！！");
                    return
                }
                $.post('queryuname', { actorname: actorname, serverid: serverid }, function (res) {
                    //判断有没有权限
                    if (res && res.code == 999) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 2000,
                        })
                        return false;
                    } else if (res.code == 200) {
                        // 清空下拉框中的所有选项
                        $("#actoraccount"+v).empty();
                            // 遍历data数组并添加选项
                            res.data.forEach(function (item) {
                                $("#actoraccount"+v).append(
                                    '<option value="' + item.actorid + '&' + item.job + '">' + item.actorname + '</option>'
                                );
                            });
                            // 使用layui的下拉框模块进行渲染
                            // layui.form.render('select');
                        
                    } else {
                        layer.msg(res.msg)
                        console.log(res.msg)
                    }
                })
            }









        })
    </script>
</body>

</html>